import {FC, useEffect, useImperativeHandle, useState} from "react";
import {Button, Form, message, Select, Upload, UploadFile} from "antd";
import _ from "lodash";
import {UploadOutlined} from "@ant-design/icons";
import {patrolApi, patrolOrderApi, patrolPlanApi, workshopElementsInstanceApi} from "../../../../apis/workshop";

interface WorkshopLayoutInfoTestProps {
    id?: string
    visible?: boolean
    onRef?:any
}

/**
 * 测试表单
 * @param props
 * @constructor
 */
const WorkshopLayoutInfoTest: FC<WorkshopLayoutInfoTestProps> = (props) => {
    const [form] = Form.useForm();
    const {validateFields, resetFields, setFieldsValue} = form;
    const {Option} = Select
    const visibleStyle = {display: 'flex', overflow: 'visible', justifyContent: 'space-around', height: '100%'};
    const unVisibleStyle = {display: 'flex', overflow: 'auto', justifyContent: 'space-around', height: '0px'};
    const [patrolPlans, setPatrolPlans] = useState<any[]>([])
    const [patrolOrders, setPatrolOrders] = useState<any[]>([])
    const sheetType = "C";


    useEffect(() => {
        if (props.id && props.visible) {
            patrolApi.queryByInstanceId(props.id, sheetType).then((res: any) => {
                if (res) {
                    setFieldsValue(res)
                }
            });
        }
        if (props.visible) {
            handleQueryAllPatrolPlan();
            handleQueryAllPatrolOrder();
        }
    }, [props.id, props.visible])

    const handleQueryAllPatrolPlan = () => {
        patrolPlanApi.queryByType(sheetType).then((res: any) => {
            if (res) {
                setPatrolPlans(res)
            }
        })
    }

    const handleQueryAllPatrolOrder = () => {
        patrolOrderApi.queryAll().then((res: any) => {
            if (res) {
                setPatrolOrders(res)
            }
        })
    }

    const handleSubmit = () => {
        validateFields().then((values) => {
            let data = {
                ...values,
                instanceId: props.id,
                type: sheetType,
            }
            patrolApi.save(data).then((res: any) => {
                message.success(`保存成功`)
            })
        })
    }

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
        },
    };

    useImperativeHandle(props.onRef, () => {
        return {
            handleSubmit: handleSubmit,
        };
    });

    return (<div style={props.visible ? visibleStyle : unVisibleStyle}>
        <Form
            {...formItemLayout}
            colon={false}
            form={form}
            style={{width:'100%'}}
            scrollToFirstError
            labelAlign={"left"}
        >
            <Form.Item name={`patrolPlans`} label={'测试方案'} style={{marginBottom:20}}>
                <Select
                    placeholder={'请选择测试方案'}
                    mode="multiple"
                    allowClear
                    style={{width: 200}}
                    optionFilterProp="children"
                    // fieldNames={{label:'watchPlanName',value:'id'}}
                >
                    {patrolPlans && patrolPlans.map((patrolPlan: any, index: any) => (
                        <Option key={index}
                                value={_.get(patrolPlan, 'id')}>{_.get(patrolPlan, 'watchPlanName')}</Option>
                    ))}
                </Select>
            </Form.Item>

            <Form.Item name={`patrolOrders`} label={'工单模板'} style={{marginBottom:10}}>
                <Select
                    placeholder={'请选择工单模板'}
                    mode="multiple"
                    allowClear
                    style={{width: 200}}
                    optionFilterProp="children"
                    // fieldNames={{label:'sheetName',value:'id'}}
                >
                    {patrolOrders && patrolOrders.map((patrolOrder: any, index: any) => (
                        <Option key={index} value={_.get(patrolOrder, 'id')}>{_.get(patrolOrder, 'sheetName')}</Option>
                    ))}
                </Select>
            </Form.Item>

        </Form>
    </div>)
}

export default WorkshopLayoutInfoTest;
